<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:useBean id="requestvar" scope="request" class="java.lang.StringBuffer"/>
<html>
<head>
    <title>文章类型</title>
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- 可选: 包含 jQuery 库 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 可选: 合并了 Bootstrap JavaScript 插件 -->
    <script src="https://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <style>
        .popover{
            max-width: 2000px;
        }
        #table{
            border: #ECECED 1px solid;
        }
    </style>

</head>


<body>

<div class="row">
    <div>
        <ol class="breadcrumb">
            <li><a href="${pageContext.request.contextPath}/main/gomain" class="btn btn-primary btn-sm"
                   role="button"><span class="glyphicon glyphicon-home pull-right" aria-hidden="true"></span>&nbsp;&nbsp;
                主&nbsp;&nbsp; 页</a></li>
            <li class="active">系统功能管理</li>
        </ol>
    </div>
</div>

<div class="container">



    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1>
                    <small>系统功能管理 —— 显示父功能和子功能</small>&nbsp;&nbsp;&nbsp;&nbsp;
                </h1>

            </div>

        </div>
    </div>

    <br>

    <div class="row">
        <div class="col-md-6"> <!-- Contextual button for informational alert messages -->
            <button type="button" class="btn btn-info" id="addButton">
                <span class="glyphicon glyphicon-plus"></span>新增父功能
            </button>&nbsp;&nbsp;

            <button  type="button" class="btn btn-warning" id="batch_add">
                <span class="glyphicon glyphicon-plus"></span>添加子功能
            </button>&nbsp;&nbsp;
            <!-- Indicates a successful or positive action -->
            <button type="button" class="btn btn-success" id="batch_delete">
                <span class="glyphicon glyphicon-trash"></span>批量删除
            </button>&nbsp;&nbsp;
            <!-- Contextual button for informational alert messages -->
            <button type="button" class="btn btn-info" onclick="a1()">
                <span class="glyphicon glyphicon-repeat"></span>刷新
            </button>
        </div>
    </div>

    <br>


    <div class="row clearfix">
        <div class="col-md-12 column">
            <table class="table table-striped" id="table">
                <thead>
                <tr >
                    <th><input type="checkbox" id="main-type-id" style="zoom:150%;"/></th>
                    <th>父功能名字</th>
                    <th>父功能状态</th>
                    <th>子功能名字</th>
                    <th>访问地址</th>
                    <th>状态</th>
                    <th>操 作</th>

                </tr>
                </thead>

                <tbody>
                <c:forEach var="fun" items="${funList}">
                    <c:if test="${fun.childrenFunction.size()!=0}">
                        <tr>
                            <td rowspan="${fun.childrenFunction.size()}" id="tdOne">
                                <span class="glyphicon glyphicon-ban-circle" id="nose"></span>
                            </td>
                            <td rowspan="${fun.childrenFunction.size()}">${fun.fatherFunctionName}</td>
                            <td rowspan="${fun.childrenFunction.size()}">${fun.fatherFunctionState==1?"可用":"不可用"}</td>
                            <c:forEach items="${fun.childrenFunction}" var="childrenFunction" begin="0" end="0">
                                <td>${childrenFunction.funName}</td>
                                <td>${childrenFunction.funAddr}</td>
                                <td>${childrenFunction.funState==1?"可用":"不可用"}</td>
                                <td>
                                    <!-- Indicates caution should be taken with this action -->
                                    <a href="#" type="button" class="btn btn-warning" data-toggle="popover" funId="${childrenFunction.funId}">编辑子功能</a>
                                    <button  type="button" class="btn btn-danger" data-toggle="deleteSonFun" funId="${childrenFunction.funId}" funSonName="${childrenFunction.funName}">删除子功能</button>
                                </td>
                            </c:forEach>
                        </tr>
                    </c:if>

                    <c:if test="${fun.childrenFunction.size()==0}">
                        <tr>
                            <td>
                                <input class="one" type="checkbox" value="${fun.fatherFunctionID}" typeName="${fun.fatherFunctionName}" name="ids" style="zoom:150%;">

                            </td>
                            <td>${fun.fatherFunctionName}</td>
                            <td>${fun.fatherFunctionState==1?"可用":"不可用"}</td>
                            <td colspan="3" style="text-align: center">改父功能没有子功能</td>
                            <td>
                                <a href="#" type="button" class="btn btn-info" data-toggle="add" funPid="${fun.fatherFunctionID}">添加子功能</a>
                                <button  type="button" class="btn btn-success" data-toggle="deleteFun" funId="${fun.fatherFunctionID}" funName="${fun.fatherFunctionName}">删除父功能</button>
                            </td>
                        </tr>
                    </c:if>


                    <c:if test="${fun.childrenFunction.size()!=0}">
                        <c:forEach var="childrenFunction" items="${fun.childrenFunction}" begin="1" end="${fun.childrenFunction.size()-1}">
                            <tr>
                                <td>${childrenFunction.funName}</td>
                                <td>${childrenFunction.funAddr}</td>
                                <td>${childrenFunction.funState==1?"可用":"不可用"}</td>
                                <td>
                                    <!-- Indicates caution should be taken with this action -->
                                    <a href="#" type="button" class="btn btn-warning" data-toggle="popover" funId="${childrenFunction.funId}">编辑子功能</a>
                                    <button  type="button" class="btn btn-danger" data-toggle="deleteSonFun" funId="${childrenFunction.funId}" funSonName="${childrenFunction.funName}">删除子功能</button>
                                </td>
                            </tr>
                        </c:forEach>
                    </c:if>





                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>



</div>
<script>
    let a1=function (){
        window.location.href="${pageContext.request.contextPath}/function/findFunAll"
    }

    $("#tdOne #nose").click(function (){
        alert("此父方法里包含子方法，请先删除子方法")
    })
    $("#batch_delete").click(function(){
        let ones=$(".one:checked")
        if(ones.length===0){
            alert("请选择要删除的项！")
        }else{
            let arr_id=[];
            let articleName=[]
            $.each(ones,function(i,n){
                arr_id.push($(n).val())
                articleName.push($(n).attr("typeName"))
                console.log($(n).val())
                console.log(arr_id)
                console.log(articleName)
            })
            if(confirm("是否删除角色名为【"+articleName.join(",")+"】的记录？")){
                console.log("提交到后台的gid为："+arr_id.join(","))
                $.ajax({
                    url:"${pageContext.request.contextPath}/function/deleteSelectedFun",
                    type:"post",
                    data:{"ids":arr_id.join(",")},
                    success:function (msg){
                        alert(msg);
                        a1();
                    }
                })
            }
        }

    })

    $("[data-toggle='deleteSonFun']").each(function (){
        $(this).click(function (){
            let funId=$(this).attr("funId")
            let funName=$(this).attr("funSonName");
            if(confirm("是否删除【" + funName + "】的方法？")){
                $.ajax({
                    url: "${pageContext.request.contextPath}/function/findByRoleFunId",  //url请求地址
                    data: {"funId":funId} ,
                    type: "get",
                    success: function (flag) {
                        if(flag){
                            $.ajax({
                                url: "${pageContext.request.contextPath}/function/deleteFatherFun",  //url请求地址
                                data: {"funId":funId} ,
                                type: "get",
                                success: function (msg) {
                                    alert(msg)
                                    a1();
                                }
                            })
                        }else {
                            alert("改方法已经被使用喽！不能删除！")
                        }
                    }
                })
            }
        })
    })

    $("#main-type-id").on("click",function(){
        $(".one").prop("checked",$(this).prop("checked"))
    })


    $("table").on("click",".one",function(){
        $("#main-type-id").prop("checked",$(".one").length===$(".one:checked").length)
    })

    $("[data-toggle='deleteFun']").each(function(){
        $(this).click(function () {
            if (confirm("是否删除【" + $(this).attr("funName") + "】的方法？")) {
                console.log("提交到后台的gid为：" + $(this).attr("funId"))
                $.ajax({
                    url: "${pageContext.request.contextPath}/function/deleteFatherFun",  //url请求地址
                    data: {"funId":$(this).attr("funId")} ,
                    type: "get",
                    success: function (msg) {
                       alert(msg)
                        a1();
                    }
                })

            }
        })
    })




    $("[data-toggle='popover']").each(function() {
        let element = $(this);
        let funId=$(this).attr("funId")
        element.popover({
            trigger: 'click',
            html: true,
            title: '修改子功能',
            placement: 'bottom',
            content: function() {
                return content(funId);

            }
        })

    });

    $("#addButton").popover({
            trigger: 'click',
            html: true,
            title: '添加父功能',
            placement: 'bottom',
            content: function() {
                return content2();

            }

    })

    $("[data-toggle='add']").each(function (){
        let element = $(this);
        let funPid=$(this).attr("funPid")
        element.popover({
            trigger: 'click',
            html: true,
            title: '添加子功能',
            placement: 'bottom',
            content: function() {
                return content3(funPid);

            }
        })
    })

    $("#batch_add").popover({
            trigger: 'click',
            html: true,
            title: '添加子功能',
            placement: 'bottom',
            content: function() {
                return content4();
            }

    })


    function content4(){
        let data;
        $.ajax({
            url: "${pageContext.request.contextPath}/role/findFunAll",
            type: "post",
            dataType:"json",
            success:function (fun){
                $.each(fun,function (pr_i,pr_fun){
                        let $option=$("<option value='"+pr_fun.fatherFunctionID+"'>").text(pr_fun.fatherFunctionName);
                         $option.appendTo($("#funPid"))
                })
            }
        })
        data=$(
            '<form action="${pageContext.request.contextPath}/function/addChFun" method="get" id="roleForm" style="width: 300px">'+
            '选父方法：<select name="funPid" id="funPid" class="form-control"><option disabled value="" selected>--请选择--</option></select><br>'+
            '<div class="form-group">'+
            '<label for="funName">方法名字</label>'+
            '<input type="text" class="form-control" id="funName" placeholder="方法名字" name="funName" >'+
            '</div>'+
            '<div class="form-group">'+
            '<label for="funAddr">方法地址</label>'+
            '<input type="text" class="form-control" id="funAddr" placeholder="方法地址" name="funAddr">'+
            '</div>'+
            '方法状态：<select name="funState" id="funState" class="form-control"> <option disabled value="" selected>--请选择--</option><option value="1" id="sexRadio">可用</option><option value="0"  id="sexRadio2">不可用</option></select><br>'+
            '<button type="submit" class="btn btn-success" id="submitRole">'+
            ' <span class="glyphicon glyphicon-paste"></span>提交' +
            '</button>&nbsp;&nbsp;&nbsp;&nbsp;'+
            '<button type="button" class="btn btn-info"  onclick="a1()">'+
            ' <span class="glyphicon glyphicon-remove"></span>取消' +
            '</button>'+
            '</form>'
        )
        return data
    }

    function content3(funPid){
        let data;
        data=$(
            '<form action="${pageContext.request.contextPath}/function/addChFun" method="get" id="roleForm" style="width: 300px">'+
            '<div class="form-group">'+
            '<label for="funName">方法名字</label>'+
            '<input type="text" class="form-control" id="funName" placeholder="方法名字" name="funName" >'+
            '</div>'+
            '<input type="hidden" name="funPid" value="'+funPid+'"/>'+
            '<div class="form-group">'+
            '<label for="funAddr">方法地址</label>'+
            '<input type="text" class="form-control" id="funAddr" placeholder="方法地址" name="funAddr">'+
            '</div>'+
            '方法状态：<select name="funState" id="funState" class="form-control"> <option disabled value="" selected>--请选择--</option><option value="1" id="sexRadio">可用</option><option value="0"  id="sexRadio2">不可用</option></select><br>'+
            '<button type="submit" class="btn btn-success" id="submitRole">'+
            ' <span class="glyphicon glyphicon-paste"></span>提交' +
            '</button>&nbsp;&nbsp;&nbsp;&nbsp;'+
            '<button type="button" class="btn btn-info"  onclick="a1()">'+
            ' <span class="glyphicon glyphicon-remove"></span>取消' +
            '</button>'+
            '</form>'
        )
        return data
    }

    function content2(){
        let data;
        data=$(
            '<form action="${pageContext.request.contextPath}/function/addFatherFun" method="post" id="roleForm" style="width: 300px">'+
            '<div class="form-group">'+
            '<label for="funName">方法名字</label>'+
            '<input type="text" class="form-control" id="funName" placeholder="请输入方法名字" name="funName" >'+
            '</div>'+
            '方法状态：<select name="funState" id="funState" class="form-control"> <option disabled value="" selected>--请选择--</option><option value="1" id="sexRadio">可用</option><option value="0"  id="sexRadio2">不可用</option></select><br>'+
            '<button type="submit" class="btn btn-success" id="submitRole">'+
            ' <span class="glyphicon glyphicon-paste"></span>提交' +
            '</button>&nbsp;&nbsp;&nbsp;&nbsp;'+
            '<button type="button" class="btn btn-info"  onclick="a1()">'+
            ' <span class="glyphicon glyphicon-remove"></span>取消' +
            '</button>'+
            '</form>'
        )
        return data
    }

    //模拟动态加载内容(真实情况可能会跟后台进行ajax交互)
    function  content(funId)  {
        let data;
        $.ajax({
            url: "${pageContext.request.contextPath}/function/findByFun",
            type: "get",
            data: {"funId":funId},
            dataType:"json",
            success:function (fun){
              $("#funName").val(fun.funName)
                $("#funId").val(fun.funId)
                $("#funAddr").val(fun.funAddr)

                    //获取选中的下拉条
                    let funState = $("#funState").val().trim();
                     console.log(fun)
                     console.log(funState)
                     console.log(fun.funState)
                    //动态设置单选框的选中
                    if(funState===""+fun.funState+""){
                        $("#sexRadio").prop("selected",true);
                        $("#sexRadio2").prop("selected",false);
                    }else {
                        $("#sexRadio").prop("selected",false);
                        $("#sexRadio2").prop("selected",true);
                    }
            }
        })
        data=$(
            '<form action="${pageContext.request.contextPath}/function/update" method="get" id="roleForm" style="width: 300px">'+
            '<div class="form-group">'+
                '<label for="funName">方法名字</label>'+
                '<input type="text" class="form-control" id="funName" placeholder="方法名字" name="funName" >'+
            '</div>'+
            '<input type="hidden" name="funId" id="funId"/>'+
            '<div class="form-group">'+
            '<label for="funAddr">方法地址</label>'+
            '<input type="text" class="form-control" id="funAddr" placeholder="方法地址" name="funAddr">'+
            '</div>'+
            '方法状态：<select name="funState" id="funState" class="form-control"><option value="1" id="sexRadio">可用</option><option value="0"  id="sexRadio2">不可用</option></select><br>'+
            '<button type="submit" class="btn btn-success" id="submitRole">'+
            ' <span class="glyphicon glyphicon-paste"></span>提交' +
            '</button>&nbsp;&nbsp;&nbsp;&nbsp;'+
            '<button type="button" class="btn btn-info"  onclick="a1()">'+
            ' <span class="glyphicon glyphicon-remove"></span>取消' +
            '</button>'+
            '</form>'
        )
        return data

    }
    //模拟悬浮框里面的按钮点击操作
    function  test()  {
        if ($('.two').is(':checked')){
            let msg= confirm("确定要修改角色?")
        }else {
            alert("请选择要更改的角色")
            $('#roleForm').on('submit', function (event) {
                event.preventDefault();
            });
        }

    }

</script>
</body>
</html>

